<template>
  <div class="containner">
    <el-card>
      <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">企业管理</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">企业组织结构</a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    </el-card>
    <div>
      <template>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="组织架构图" name="first">
            <el-row class="row-small">
              <el-button type="primary" size="small">导入</el-button>
              <el-button type="primary" size="small">导出图片</el-button>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="组织管理" name="second">
            <el-table :data="tableData" style="width: 100%;height:49px">
              <el-table-column prop="date" label="组织架构" style="width:30%">
              </el-table-column>
              <el-table-column prop="name" label="在职（直属/总共）" style="width:12%">
              </el-table-column>
              <el-table-column prop="name" label="编制（直属/总共）" style="width:12%">
              </el-table-column>

              <el-table-column prop="address" label="部门负责人" style="width:11%">
              </el-table-column>
              <el-table-column prop="address" label="操作" style="width:35%">
              </el-table-column>

            </el-table>
            <el-tree :props="defaultProps" accordion="true" :expand-on-click-node="false" show-checkbox check-on-click-node
              @check="check" :highlight-current="true" :data="data" node-key="id" default-expand-all 
              style="width:100%:font-szie:27px">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.name }}</span>
                <span>
                  <el-button type="text" size="mini" class="dataname">
                    {{data.name}}
                  </el-button>
                  <el-button type="text" size="mini" class="a" >
                    <!-- {{data.memberTypes['1']+'/'+data.memberTypes['2']}}  no-->
                    <span>{{data.memberTypes|filterTreeNode}}</span>
                  </el-button>
                  <el-button type="text" size="mini" class="b">
                    <!-- {{data.jobTypes['1']+'/'+data.jobTypes['2']}} no-->
                    <span>{{data.jobTypes|filterTreeNode}}</span>

                  </el-button>

                  <el-button type="text" size="mini" class="c">
                    4
                  </el-button>
                  <el-button type="text" size="mini" class="useadit">
                    <el-button type="text" size="mini" @click="() => append(data)">新增部门</el-button>
                    <el-button type="text" size="mini" @click="() => edit(data)">编辑</el-button>
                    <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-tab-pane>
          <el-tab-pane label="工作地点" name="third">
            <el-input placeholder="搜索地点名称/城市/详细地址" style="width:230px" v-model="input" clearable>
            </el-input>
            <el-button type="primary" icon="el-icon-search" size="mini"></el-button>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column label="名称" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column prop="name" label="国家/地区" width="120">
              </el-table-column>
              <el-table-column prop="address" label="城市" width="240">
              </el-table-column>
              <el-table-column prop="name" label="详细地址" width="120">
              </el-table-column>
              <el-table-column prop="name" label="类别" width="120">
              </el-table-column>
              <el-table-column prop="dec" label="描述" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="name" label="操作" width="240">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <!-- //编辑工作地点的dialog对话框 -->
        <el-dialog title="编辑工作地点" :visible.sync="dialogFormEditVisible" width="35%">
          <el-form :model="ruleFormEdit" :rules="rules" ref="ruleFormEdit" label-width="120px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
              <el-input v-model="ruleFormEdit.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="国家/地区" prop="region">
              <el-input v-model="ruleFormEdit.region" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="number">
              <el-input v-model="ruleFormEdit.region" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="account">
              <el-input v-model="ruleFormEdit.account" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="band">
              <el-select v-model="ruleFormEdit.band" placeholder="请选择开户银行">
                <el-option label="中国建设银行" value="shanghai"></el-option>
                <el-option label="中国工商银行" value="beijing"></el-option>
                <el-option label="中国农业银行" value="beijing"></el-option>
                <el-option label="中国银行" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="address">
              <el-input v-model="ruleFormEdit.address" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormEditVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormEditVisible = false">确 定</el-button>
          </div>
        </el-dialog>
        <!-- //编辑节点的dialog对话框 -->
        <el-dialog title="编辑" :visible.sync="dialogVisible">
          <el-form ref="editNodeForm">
            <el-form-item label="总部地址">
              <el-input placeholder="请输入节点名称" v-model="editNodeForm.name" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="在职(直属/总共)">
              <!-- <el-input placeholder="在职直属" :value="editNodeForm.jobTypes|filterTreeNode(0)"  style="width: 80px"></el-input> -->
              <el-input placeholder="在职直属" v-model="editNodeForm.jobTypes1"  style="width: 80px"></el-input>
              <el-input placeholder="在职总共" v-model="editNodeForm.jobTypes2"  style="width: 80px"></el-input>
              <!-- <el-input placeholder="在职总共" v-bind:value="editNodeForm.jobTypes|filterTreeNode(1)"  style="width: 80px"></el-input> -->
            </el-form-item>
            {{editNodeForm.jobTypes1}}
            <el-form-item label="编制(直属/总共)">
              <!-- <el-input placeholder="编制直属" :value="editNodeForm.memberTypes|filterTreeNode(0)" style="width: 80px"></el-input> -->
              <el-input placeholder="编制直属" v-model="editNodeForm.memberTypes1" style="width: 80px"></el-input>
              <el-input placeholder="编制总共" v-model="editNodeForm.memberTypes2" style="width: 80px"></el-input>
              <!-- <el-input placeholder="编制总共" :value="editNodeForm.memberTypes|filterTreeNode(1)" style="width: 80px"></el-input> -->
            </el-form-item>
            <el-form-item label="部门负责人">
              <el-input placeholder="请输入部门负责人" style="width: 220px"></el-input>
            </el-form-item>
          </el-form>
          <!-- <span>
            <el-button @click="cancleSaveNode">
              取消
            </el-button>
            <el-button @click="saveNode">
              确定
            </el-button>
          </span> -->

        </el-dialog>
      </template>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      defaultProps: {
        children: 'subOrginization',
        label: 'name'
      },
      data: [],
      defaultProps: {
        children: 'subOrginization',
        label: 'name'
      },
      input: '',
      tableData: [],
      multipleSelection: [],
      dialogFormEditVisible: false,
      ruleFormEdit: {
        name: '',
        region: '', //注册电话
        number: '', //纳税人识别码
        account: '', //银行账户
        band: '', //开户银行
        address: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: '',
      //cdmn
      dialogVisible: false,
      // treeNode: _treeNode,
      treeList: [],
      treeListData: [], // 无层级结构节点数据
      checkCurrentDodeDate: {}, //选中改节点时的数据
      editNodeForm: {}, //编辑节点的表单数据
      editMetype:[]
    }
  },
  filters:{
    filterTreeNode (value,index){
      var array = []
      for(var it in value){
        array.push(value[it])
      }
      if(index!=undefined){
        return array[index]
      }else{
        return array.join("/")
      }
      
    }
    
  },
  methods: {
    filterTreeNode1 (value,index){
      var array = []
      for(var it in value){
        array.push(value[it])
      }
      return array[index]
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    //增加用户
    append(data) {
      let id = 0 //this.data.id
      let name = this.data.name
      let subOrginization = this.data.subOrginization
      const newChild = { id: id++, name: 'testtest', subOrginization: [] }
      if (!data.subOrginization) {
        this.$set(data, 'subOrginization', [])
      }
      data.subOrginization.push(newChild)
    },
    //编辑用户
    edit(data, node) {
      this.dialogVisible = true
    },
    //点击节点获得当前节点的data
    check(data, node) {
      console.log('data', data)
      // console.log('node',node)
      this.checkCurrentDodeDate = data
      this.editNodeForm = this.checkCurrentDodeDate
      this.editNodeForm.jobTypes1 = this.checkCurrentDodeDate.jobTypes['1']
      this.editNodeForm.jobTypes2 = this.checkCurrentDodeDate.jobTypes['2']
      this.editNodeForm.memberTypes1 = this.checkCurrentDodeDate.memberTypes['1']
      this.editNodeForm.memberTypes2 = this.checkCurrentDodeDate.memberTypes['2']
      // console.log(this.checkCurrentDodeDate.name)
      console.log(this.checkCurrentDodeDate.jobTypes['1'])
      console.log(this.checkCurrentDodeDate.jobTypes['2'])
      console.log(this.editNodeForm.memberTypes['1'] )
      console.log(this.editNodeForm.memberTypes['2'] )

      console.log(this.editNodeForm)
    },
    //删除用户
    remove(node, data) {
      const parent = node.parent
      const subOrginization = parent.data.subOrginization || parent.data
      const index = subOrginization.findIndex(d => d.id === data.id)
      subOrginization.splice(index, 1)
    },
    handleSelectionChange() {},
    //获取当前租户的全部组织架构树
    async getCurrentCompanyOrganzationTree() {
      const { data: res } = await this.$http.get('company/organization/tree')
      console.log(res.data)
      console.log(res.data.subOrginization)
      this.data = res.data.subOrginization
    },
    //获取当前租户的工作地的名称和值
    async getCurrentWorkstation() {
      const { data: res } = await this.$http.get('company/workstation/namepair')
      console.log(res)
    }
  },
  created() {
    this.getCurrentCompanyOrganzationTree()
    this.getCurrentWorkstation()
  }
}
</script>
<style>
.el-table th {
  background-color: #d6d8dc !important;
}
</style>
<style lang="less" scoped>
.row-small {
  margin-left: 0px;
}

.custom-tree-node {
  // flex: 1;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  font-size: 14px;
  margin-top: -31px;
  // padding-right: 568px;
}
.input-d {
  width: 200px;
}
.useadit {
  // margin-left:300px;
  // color:red!important;
  position: absolute;
  left: 78%;
}
.a {
  position: absolute;
  left: 22%;
  color: #222;
  font-size: 14px;
}
.b {
  position: absolute;
  left: 40%;
  color: #222;
  font-size: 14px;
}
.c {
  position: absolute;
  left: 60%;
  color: #222;
  font-size: 14px;
}
.dataname {
  position: absolute;
  left: 8%;
  color: #222;
  font-size: 14px;
}
</style>